<template>
    <div class="myheader">
        <div class="top">
          <div class="left">仿知乎专栏</div>
          <div class="right">
             <div v-if="!$store.state.token">
                   <el-button type="primary" plain  @click="$router.push('/login')">登录</el-button>
                   <el-button type="primary" plain>注册</el-button>
             </div>
             <div v-else>
                     <el-dropdown>
                          <el-button type="primary" plain> 
                            小杨同学
                           <el-icon class="el-icon--right">
                            <arrow-down />
                            </el-icon>
                          </el-button>
                          <template #dropdown>
                              <el-dropdown-menu>
                                  <el-dropdown-item @click="$router.push('/create')">新建文章</el-dropdown-item>
                                  <el-dropdown-item @click="$router.push({path:'/zhuanlan',query:{ id:state.data.column} })">我的专栏</el-dropdown-item>
                                  <el-dropdown-item>编辑资料</el-dropdown-item>
                                  <el-dropdown-item @click="$store.commit('goout')">退出登录</el-dropdown-item>
                              </el-dropdown-menu>
                         </template>
                    </el-dropdown>
             </div>
           </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import {getuser} from "@/utils/api"
import {reactive} from "vue"
import  {useStore} from "vuex"
let {commit}  = useStore()
const state =reactive({
    data:{}
})
 getuser().then(res=>{
  console.log(res,41);  
      state.data =res.data
      console.log(state.data,42);
      
      console.log(res.data._id);
      
      commit('userid',{column:res.data.column,id:res.data._id})
 })
</script>


<style lang="scss" scoped>
.top {
  height: 8vh;
  background-color: #0d6efd;
  color: #fff;
  padding: 0 25px;
  display: flex;
  justify-content: space-between;
  line-height: 8vh;
}
</style>
